<!-- 秒杀活动列表 -->
<template>
  <s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }">
    <!--顶部背景图-->
    <view
        class="page-bg uno-flex uno-flex-justify-center uno-items-center"
        :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
    >
      <view style="color: #fff;font-size: 50rpx">
        每日一兑秒杀
      </view>
    </view>
    <!-- 时间段轮播图 -->
<!--    <view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0">-->
<!--      <swiper indicator-dots="true" autoplay="true" :circular="true" interval="3000" duration="1500"-->
<!--              indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">-->
<!--        <block v-for="(picUrl, index) in activeTimeConfig.sliderPicUrls" :key="index">-->
<!--          <swiper-item class="borRadius14">-->
<!--            <image :src="picUrl" class="slide-image borRadius14" lazy-load />-->
<!--          </swiper-item>-->
<!--        </block>-->
<!--      </swiper>-->
<!--    </view>-->
    <!-- 时间段列表 -->
    <view
class="flex uno-bg-white align-center justify-between uno-pl2 uno-pr2 uno-pt4 uno-pb4 uno-border-rd"
      style="margin: -70rpx 20rpx 0;"
    >
      <!-- 左侧图标 -->
      <view class="time-icon">
        <!-- TODO 芋艿：图片统一维护 -->
        <image class="ss-w-100 ss-h-100" src="http://mall.yudao.iocoder.cn/static/images/priceTag.png" />
      </view>
      <scroll-view class="time-list" :scroll-into-view="activeTimeElId" scroll-x scroll-with-animation>
        <view
v-for="(config, index) in timeConfigList" :key="index"
              :class="['item', { active: activeTimeIndex === index},{ disabled: config.status === '即将开始' }]"
              :id="`timeItem${index}`"
              @tap="$event=>{
                config.status === TimeStatusEnum.STARTED && handleChangeTimeConfig(index,config.status)
              }">
          <!-- 活动起始时间 -->
          <view class="time">{{ config.startTime.split(':').slice(0,2).join(':')}}</view>
          <!-- 活动状态 -->
          <view class="status">{{ config.status }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="uno-p-2" style="font-size: 25rpx">
      <BusinessScrollList :params="activityPageParams" :col="1">
        <template #default="{item ,index}">
          <!--         uno-w-[100%] uno-box-border-->
          <view
class="uno-flex uno-bg-white uno-box-border uno-w-[100%]  uno-m2 uno-p2 uno-border-rd-lg uno-overflow-hidden "
                @click="sheep.$router.go('/pages/goods/index',{id:item.id})"
          >
            <view>
              <up-image
class="cateImage" :show-loading="true" :src="item.picUrl" width="250rpx" radius="10rpx"
                        height="250rpx"/>
            </view>
            <view style="flex: 1" class="uno-ml2">
              <view>
                <up-text :text="item.name" bold size="40rpx"/>
              </view>
              <view class="uno-flex uno-flex-justify-between uno-mt1">
                <view class="uno-flex uno-border-rd-lg uno-justify-center uno-items-center uno-bg-#da4944 uno-color-white ">
                  <text class="uno-p1 " style="font-size: 20rpx;">显示特价</text>
                </view>
                <view class="uno-flex uno-border-rd-lg uno-justify-center uno-items-center uno-bg-#da4944 uno-color-white ">
                  <text class=" uno-p1 " style="font-size: 20rpx">每人限购一件</text>
                </view>
              </view>
              <view class="uno-flex uno-w-[100%] uno-relative">
                <up-image
class="cateImage"  :src="xianshiBg" width="400rpx"
                          height="100rpx"/>
                <view class="uno-absolute uno-flex uno-justify-between uno-w[100%] " style="flex:1; top: 60rpx;">
                  <view class="uno-color-red">￥{{item.marketPrice}}</view>
                  <view class="uno-color-red">￥{{item.price}}</view>
                </view>

              </view>
              <view class="uno-flex uno-justify-center ">
                <view class="uno-flex uno-border-rd-lg uno-justify-center uno-items-center uno-bg-#da4944 uno-color-white uno-font-bold">
                  <text class="uno-pt1 uno-pb1 uno-pl2 uno-pr2  " style="font-size: 30rpx">秒杀价￥{{item.pointsPrice}}</text>
                </view>
              </view>
            </view>
          </view>
        </template>
      </BusinessScrollList>
    </view>
    <!-- 内容区 -->
    <view class="list-content">
      <!-- 活动倒计时 -->
<!--      <view class="content-header ss-flex-col ss-col-center ss-row-center">-->
<!--        <view class="content-header-box ss-flex ss-row-center">-->
<!--          <view class="countdown-box ss-flex" v-if="activeTimeConfig?.status === TimeStatusEnum.STARTED">-->
<!--            <view class="countdown-title ss-m-r-12">距结束</view>-->
<!--            <view class="ss-flex countdown-time">-->
<!--              <view class="ss-flex countdown-h">{{ countDown.h }}</view>-->
<!--              <view class="ss-m-x-4">:</view>-->
<!--              <view class="countdown-num ss-flex ss-row-center">{{ countDown.m }}</view>-->
<!--              <view class="ss-m-x-4">:</view>-->
<!--              <view class="countdown-num ss-flex ss-row-center">{{ countDown.s }}</view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view v-else> {{ activeTimeConfig?.status }} </view>-->
<!--        </view>-->
<!--      </view>-->

      <!-- 活动列表 -->
<!--      <scroll-view-->
<!--        class="scroll-box"-->
<!--        :style="{ height: pageHeight + 'rpx' }"-->
<!--        scroll-y="true"-->
<!--        :scroll-with-animation="false"-->
<!--        :enable-back-to-top="true"-->
<!--      >-->
<!--        <view class="goods-box ss-m-b-20" v-for="activity in activityList" :key="activity.id">-->
<!--          <s-goods-column-->
<!--            size="lg"-->
<!--            :data="{ ...activity, price: activity.seckillPrice }"-->
<!--            :goodsFields="goodsFields"-->
<!--            :seckillTag="true"-->
<!--            @click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })"-->
<!--          >-->
<!--            &lt;!&ndash; 抢购进度 &ndash;&gt;-->
<!--            <template #activity>-->
<!--              <view class="limit">限量 <text class="ss-m-l-5">{{ activity.stock}} {{activity.unitName}}</text></view>-->
<!--              <su-progress :percentage="activity.percent" strokeWidth="10" textInside isAnimate />-->
<!--            </template>-->
<!--            &lt;!&ndash; 抢购按钮 &ndash;&gt;-->
<!--            <template #cart>-->
<!--              <button :class="['ss-reset-button cart-btn', { disabled: activeTimeConfig.status === TimeStatusEnum.END }]">-->
<!--                <span v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START">未开始</span>-->
<!--                <span v-else-if="activeTimeConfig?.status === TimeStatusEnum.STARTED">马上抢</span>-->
<!--                <span v-else>已结束</span>-->
<!--              </button>-->
<!--            </template>-->
<!--          </s-goods-column>-->
<!--        </view>-->
<!--        <uni-load-more-->
<!--          v-if="activityTotal > 0"-->
<!--          :status="loadStatus"-->
<!--          :content-text="{-->
<!--            contentdown: '上拉加载更多',-->
<!--          }"-->
<!--          @tap="loadMore"-->
<!--        />-->
<!--      </scroll-view>-->
    </view>
  </s-layout>
</template>
<script setup>
  import {reactive, computed, ref, nextTick} from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import SeckillApi from "@/sheep/api/promotion/seckill";
  import dayjs from "dayjs";
  import {TimeStatusEnum} from "@/sheep/util/const";
  import BusinessScrollList from '@/sheep/businessCom/business-scroll-list.vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';

  // 计算页面高度
  const { safeAreaInsets, safeArea } = sheep.$platform.device;
  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
  const pageHeight = (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
  const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-header.png');
const xianshiBg = 'https://www.zhangfkj.cn/zfkj/c55981555240528e936876a774dc7a0bf827101e8e34e2b7532bf7348f5eafed.png';
  // 商品控件显示的字段（不显示库存、销量。改为显示自定义的进度条）

  //#region 时间段
  // 时间段列表
  const timeConfigList = ref([])
  // 查询时间段
  const getSeckillConfigList = async () => {
    const { data } = await SeckillApi.getSeckillConfigList()
    const now = dayjs();
    const today = now.format('YYYY-MM-DD')
    // 判断时间段的状态
    data.forEach((config, index) => {
      const startTime = dayjs(`${today} ${config.startTime}`)
      const endTime = dayjs(`${today} ${config.endTime}`)
      if (now.isBefore(startTime)) {
        config.status = TimeStatusEnum.WAIT_START;
      } else if (now.isAfter(endTime)) {
        config.status = TimeStatusEnum.END;
      } else {
        config.status = TimeStatusEnum.STARTED;
        activeTimeIndex.value = index;
      }
    })
    timeConfigList.value = data
    // 默认选中进行中的活动
    handleChangeTimeConfig(activeTimeIndex.value);
    // 滚动到进行中的时间段
    scrollToTimeConfig(activeTimeIndex.value)
  }

  // 滚动到指定时间段
  const activeTimeElId = ref('') // 当前选中的时间段的元素ID
  const scrollToTimeConfig = (index) => {
    nextTick(() => activeTimeElId.value = `timeItem${index}`)
  }

  // 切换时间段
  const activeTimeIndex = ref(0) // 当前选中的时间段的索引
  const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]) // 当前选中的时间段
  const handleChangeTimeConfig = (index,status) => {
    activeTimeIndex.value = index
    // 查询活动列表
    activityPageParams.pageNo = 1
    activityList.value = []
  }
  // 查询活动列表
  const activityPageParams = reactive({
    name:'限时秒杀'
  })
  const activityList = ref([]) // 活动列表

  // 页面初始化
  onLoad(async () => {
    await getSeckillConfigList()
  });
  onReachBottom(() => {
    console.log('到底了');
    uni.$emit('onReachBottom');
  });
</script>
<style lang="scss" scoped>
  // 顶部背景图
  .page-bg {
    width: 100%;
    height: 250rpx;
    background: #da4944;
    background-size: 100% 100%;
  }

  // 时间段轮播图
  .header {
    width: 710rpx;
    height: 330rpx;
    margin: -276rpx auto 0 auto;
    border-radius: 14rpx;
    overflow: hidden;
    swiper{
      height: 330rpx !important;
      border-radius: 14rpx;
      overflow: hidden;
    }

    image {
      width: 100%;
      height: 100%;
      border-radius: 14rpx;
      overflow: hidden;
      img{
        border-radius: 14rpx;
      }
    }
  }

  // 时间段列表：左侧图标
  .time-icon {
    width: 100rpx;
    height: 80rpx;
  }
  // 时间段列表
  .time-list {
    margin-left: 10rpx;
    flex : 1  1 400rpx;
    white-space: nowrap;
    // 时间段
    .item {
      display: inline-block;
      font-size: 30rpx;
      color: #666;
      text-align: center;
      box-sizing: border-box;
      margin-right: 10px;
      width: 130rpx;
      // 开始时间
      .time {
        font-size: 36rpx;
        color: #333;
      }
      // 选中的时间段
      &.active {
        .time {
          color: #fe254f;
        }
        // 状态
        .status {
          height: 30rpx;
          line-height: 30rpx;
          border-radius: 15rpx;
          width: 128rpx;
          background: #fe254f;
          color: #fff;
        }
      }
      &.disabled{
        color:#c2c2c2 !important;
      }
    }
  }

  // 内容区
  .list-content {
    position: relative;
    z-index: 3;
    margin: 0 20rpx 0 20rpx;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    .content-header {
      width: 100%;
      border-radius: 20rpx 20rpx 0 0;
      height: 150rpx;
      background: linear-gradient(180deg, #fff4f7, #ffe6ec);

      .content-header-box {
        width: 678rpx;
        height: 64rpx;
        background: rgba($color: #fff, $alpha: 0.66);
        border-radius: 32px;
        // 场次倒计时内容
        .countdown-title {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
          line-height: 28rpx;
        }
        // 场次倒计时
        .countdown-time {
          font-size: 28rpx;
          color: rgba(#ed3c30, 0.23);
          // 场次倒计时：小时部分
          .countdown-h {
            font-size: 24rpx;
            font-family: OPPOSANS;
            font-weight: 500;
            color: #ffffff;
            padding: 0 4rpx;
            height: 40rpx;
            background: rgba(#ed3c30, 0.23);
            border-radius: 6rpx;
          }
          // 场次倒计时：分钟、秒
          .countdown-num {
            font-size: 24rpx;
            font-family: OPPOSANS;
            font-weight: 500;
            color: #ffffff;
            width: 40rpx;
            height: 40rpx;
            background: rgba(#ed3c30, 0.23);
            border-radius: 6rpx;
          }
        }
      }
    }
    // 活动列表
    .scroll-box {
      height: 900rpx;
      // 活动
      .goods-box {
        position: relative;
        // 抢购按钮
        .cart-btn {
          position: absolute;
          bottom: 10rpx;
          right: 20rpx;
          z-index: 11;
          height: 44rpx;
          line-height: 50rpx;
          padding: 0 20rpx;
          border-radius: 25rpx;
          font-size: 24rpx;
          color: #fff;
          background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);

          &.disabled {
            background: $gray-b;
            color: #fff;
          }
        }
        // 秒杀限量商品数
        .limit {
          font-size: 22rpx;
          color: $dark-9;
          margin-bottom: 5rpx;
        }
      }
    }
  }
</style>
